<template>
  <div style="background-color: #FFFFFF;border-radius: 6px">
    <!-- 步骤条 -->
    <el-steps
        class="mb-4"
        style="max-width: 100%"
        :space="500"
        :active="active"
        simple
    >
      <el-step title="开始" :icon="Position"/>
      <el-step title="基本信息" :icon="List" />
      <el-step title="功能点分析" :icon="OfficeBuilding" />
      <el-step title="造价评估" :icon="Management" />
      <el-step title="审核意见" :icon="Comment" />
      <el-step title="提交" :icon="Check" />
    </el-steps>
    <!-- 项目选择 -->
    <div v-if="active === 0" class="step1-content">
      <el-container>
        <el-header class="step1-header" >
          <div class="step1-header-row" >
            <el-form :inline="true" class="filter-form" :model="searchCriteria">
              <el-form-item label="项目名称 : ">
                <el-input v-model="name" placeholder="请输入项目名称" />
              </el-form-item>
              <!-- 状态 -->
              <el-form-item label="状态 :" style="width:250px">
                <el-select v-model="status" placeholder="请选择状态" clearable>
                  <el-option label="未评审" value="0" />
                  <el-option label="评审中" value="1" />
                  <el-option label="已通过" value="2" />
                  <el-option label="未通过" value="3" />
                </el-select>
              </el-form-item>
              <!-- 时间范围 -->

              <el-form-item label="截止时间范围 :">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    range-separator="至"
                />
              </el-form-item>
            </el-form>

            <!-- 第二行筛选表单 -->
            <el-form :inline="true" class="filter-form" :model="searchCriteria">
              <el-form-item label="评估师 :&nbsp;&nbsp;&nbsp;" style="width:250px">
                <el-input v-model="evaluator" placeholder="请输入评估师" />
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search" type="primary" @click="searchProjects">查询</el-button>
                <el-button :icon="RefreshLeft" @click="resetFilters">重置</el-button>
              </el-form-item>
            </el-form>
          </div>


        </el-header>
        <el-header style="height: 15px"/>
        <el-main class="main-content">
          <!-- 项目表格 -->
          <el-table :data="projectList" border style="width: 100%">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="projectName" label="项目名称" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="dueTime" label="截止时间" />
            <el-table-column prop="projectStatus" label="评审状态">
              <template #default="scope">
                <el-tag :type="getStatusTag(scope.row.projectStatus)">
                  {{ scope.row.projectStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    :disabled="scope.row.projectStatus === '已通过'"
                    @click="startReview(scope.row.reviewId,scope.row.projectId)"
                >
                  审核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination

              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="margin-top: 20px;display: flex;justify-content: flex-end;"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </div>
    <div v-if="active === 1" class="step2-content" style="height: 100%; padding: 16px;background-color: #FFFFFF">
      <el-card shadow="always" style="height: 100%; overflow-y: auto;">
        <h4 style="font-weight: bold;font-size: 26px">项目基本信息评审</h4>
        <el-form :model="projectDetails" label-width="120px">
          <!-- 项目名称 -->
          <el-form-item>
            <div style="width: 100%;text-align: left;">
              <span style="width: 100%;font-size: 21px;font-weight: bold">1.项目名称&nbsp;&nbsp;: </span>
            </div>
            <div style="width: 100%;text-align: left;">
              <span style="margin-left: 80px;font-size: 23px;font-weight: bold">《{{ projectDetails.project.projectName }}》</span>
            </div>

            <div style="width: 100%;text-align: right;margin-right:300px ">
              <el-radio-group v-model="aboutName" >
                <el-radio label="通过" style="font-weight: bold">通过</el-radio>
                <el-radio label="不合格" style="font-weight: bold">不合格</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-divider />

          <!-- 所属租户 -->
          <el-form-item>
            <div style="width: 100%;text-align: left;">
              <span  style="width: 100%;font-size: 21px;font-weight: bold">2.所属租户&nbsp; :</span>
            </div>
            <div style="text-align: left;width: 100%">
              <span style="margin-left: 80px;font-size: 23px;font-weight: bold">{{ projectDetails.username }}</span>
            </div>
            <div style="width: 100%;text-align: right;margin-right: 300px">
              <el-radio-group v-model="aboutTenant">
                <el-radio label="通过" style="font-weight: bold">通过</el-radio>
                <el-radio label="不合格" style="font-weight: bold">不合格</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-divider />
          <!-- 需求文档 -->
          <el-form-item>
            <div style="width: 100%;text-align: left;">
              <span  style="width: 100%;font-size: 21px;font-weight: bold">3.需求文档&nbsp; :</span>
            </div>
            <div style="text-align: left;width: 90%">
              <div v-if="true" style="margin-left: 80px;margin-top: 8px; border: 1px solid #dcdfe6; width: 100%; height: 600px; overflow: auto;">
                <iframe :src="projectDetails.project.url" style="width: 100%; height: 100%; border: none;" frameborder="0"></iframe>
              </div>
            </div>
            <div style="width: 100%;height: 20px"></div>
            <div style="width: 100%;text-align: right;margin-right: 100px">
              <el-radio-group v-model="aboutPdf">
                <el-radio label="通过" style="font-weight: bold">通过</el-radio>
                <el-radio label="不合格" style="font-weight: bold">不合格</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-divider />

          <!-- 开始时间 -->
          <el-form-item>
            <div style="width: 100%;text-align: left;">
              <span style="width: 100%;font-size: 21px;font-weight: bold">4.开始时间、截止时间 &nbsp;:</span>
            </div>
            <div style="text-align: left;width: 100%">
              <span style="width: 100%;margin-left: 80px;font-size: 23px;font-weight: bold">{{ getTimeValue(projectDetails.project.startTime) }}--至--{{ getTimeValue(projectDetails.project.endTime) }}</span>
            </div>
            <div style="width: 100%;text-align: right;margin-right: 300px">
              <el-radio-group v-model="aboutTime">
                <el-radio label="通过" style="font-weight: bold">通过</el-radio>
                <el-radio label="不合格" style="font-weight: bold">不合格</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-divider />

          <!-- 项目状态 -->
          <el-form-item>
            <div style="width: 100%;text-align: left;">
              <span style="width: 100%;font-size: 21px;font-weight: bold">5.项目状态&nbsp; :</span>
            </div>
            <div style="margin-left: 20px;">
              <span style="width: 100%;margin-left: 80px;font-size: 23px;font-weight: bold">{{ projectDetails.project.projectStatus }}</span>
            </div>
            <div style="width: 100%;text-align: right;margin-right: 300px">
              <el-radio-group v-model="aboutStatus">
                <el-radio label="通过" style="font-weight: bold">通过</el-radio>
                <el-radio label="不合格" style="font-weight: bold">不合格</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-divider />
        </el-form>
      </el-card>
    </div>

<!--功能点-->
    <div v-if="active === 2" class="step3-content" style="height:600px;width: 100%; margin: 0; padding: 0;">
      <div style="text-align: left; width: 95%; margin: 0 auto;height: 100%">
        <div
            v-if="true"
            style="margin-top: 20px; border: 1px solid #dcdfe6; width: 100%; height: 95%; overflow: auto;"
        >
          <VueOfficeDocx :src="fpUrl" class="docx-calss" />
        </div>
      </div>
      <div style="width: 100%; height: 20px;"></div>
      <div style="width: 100%; text-align: right; margin-right: 100px;">
        <el-radio-group v-model="isFpPass">
          <el-radio label="通过" style="font-weight: bold">通过</el-radio>
          <el-radio label="不合格" style="font-weight: bold">不合格</el-radio>
        </el-radio-group>
      </div>
    </div>
<!--造价评估-->
    <div v-if="active === 3" class="step4-content">
      <div style="text-align: left; width: 95%; margin: 0 auto;height: 100%">
        <div
            v-if="true"
            style="margin-top: 20px; border: 1px solid #dcdfe6; width: 100%; height: 95%; overflow: auto;"
        >
          <VueOfficeDocx :src="costUrl" class="docx-calss" />


        </div>
      </div>
      <div style="width: 100%; height: 20px;"></div>
      <div style="width: 100%; text-align: right; margin-right: 100px;">
        <el-radio-group v-model="isCostPass">
          <el-radio label="通过" style="font-weight: bold">通过</el-radio>
          <el-radio label="不合格" style="font-weight: bold">不合格</el-radio>
        </el-radio-group>
      </div>
    </div>

    <!--审核意见-->
    <div v-if="active === 4" class="step5-content">
      <h4 style="font-weight: bold;font-size: 26px">审核结果</h4>
      <el-form label-width="120px">
        <!-- 项目基本信息结果 -->
        <el-form-item>
          <div style="width: 100%;text-align: left;">
            <span style="width: 100%;font-size: 22px;font-weight: bold">1.项目基本信息审核结果&nbsp;&nbsp;: </span>
          </div>
          <div style="width: 100%;text-align: left;">
            <el-text :type="getStatusType(first_detail)" style="margin-left: 80px;font-size: 20px;font-weight: bold">[{{ first_detail }}]</el-text>
          </div>
        </el-form-item>
        <el-divider />

        <!-- 功能点分析 -->
        <el-form-item>
          <div style="width: 100%;text-align: left;">
            <span  style="width: 100%;font-size: 22px;font-weight: bold">2.功能点分析审核结果&nbsp; :</span>
            <el-text :type="getStatusType(isFpPass)" style="margin-left: 80px;font-size: 20px;font-weight: bold">{{ isFpPass }} !</el-text>
          </div>
          <div style="text-align: left;width: 100%">
          </div>
        </el-form-item>
        <el-divider />
        <!-- 综合造价评估 -->
        <el-form-item>
          <div style="width: 100%;text-align: left;">
            <span  style="width: 100%;font-size: 22px;font-weight: bold">3.综合造价评估审核结果&nbsp; :</span>
            <el-text :type="getStatusType(isCostPass)" style="margin-left: 80px;font-size: 20px;font-weight: bold">{{ isCostPass }} !</el-text>
          </div>
        </el-form-item>
        <el-divider />
        <!--审核意见-->
        <el-form-item>
          <div style="width: 100%;text-align: left;">
            <span  style="width: 100%;font-size: 22px;font-weight: bold">4.审核意见&nbsp; :</span>
          </div>
          <div style="text-align: left;width: 100%">
            <el-input
                v-model="comment"
                style="width: 800px;margin-left: 120px;font-size: 20px"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入审核意见"
            />
          </div>
        </el-form-item>


      </el-form>
    </div>
    <div v-if="active === 5">
      <img style="height: 580px;width: 560px" :src="Finished" alt="My Image"/>
      <span style="color: #7e63cd"></span>
    </div>


    <!-- 下一步按钮 -->
    <el-button type="primary" style="margin-top: 12px;margin-bottom: 20px;" @click="circulation_center" v-show="isVisible">{{but_msg}}</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref} from 'vue'
import {
  Check,
  Comment,
  List,
  Management,
  OfficeBuilding,
  Position,
  RefreshLeft,
  Search,
} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import Finished from "../../assets/ReviewFinished.svg"
import {useUserStore} from "../../stores/UserStore.ts";
import {
  getFpDerails,
  getProjectDetails,
  getReportProjectByCondition,
  getReportProjectList,
  saveProjectDetailReview
} from "../../api/Report/projectData.ts";
import {fetchData} from "pdfjs-dist";

const active = ref(0)

const isVisible = ref(false)


const cur_review_id=ref(0)
const circulation_center=()=>{
  //选择项目
  if(active.value==0){  //项目选择

  }else if(active.value==1){  //基本信息
    but_msg.value='下一步'
    box_msg.value='保存成功'
    secondProjectDetail()

  }else if(active.value==2){    //功能点评估
    but_msg.value='下一步'
    box_msg.value='保存成功'
    thirdFunctionPointEva()
  }else if(active.value==3){    //造价评估
    fourCostReview()
    but_msg.value='下一步'
    box_msg.value='提交成功'
  }else if(active.value==4){    //审核意见
    commitCommentAsync()

  }else if(active.value==5){
    isVisible.value=false
    box_msg.value='请选择评审项目'
    next()
  }
}




const box_msg=ref('开始评审')
const but_msg=ref('开始评审')
const next_but_status=ref(false)  //按钮可选中性


const next = () => {
  ElMessageBox.confirm(
      '此步骤不可回退,是否确认',
      '警告!',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        if(active.value==0){
          but_msg.value='下一步'
          isVisible.value = true
        }
        if(active.value==4){
          but_msg.value='开始新的评审'
          box_msg.value='项目完成评审'
        }

        if (active.value <5) {
          active.value++
        }


        else {
          getProjectListAsync()
          active.value = 0
          isVisible.value=false
        }
        ElMessage({
          type: 'success',
          message: box_msg.value,
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '未确认',
        })
      })
}
//审核

const userStore=useUserStore()
const reviewerId=userStore.userInfo.userId
//分页查询部分
const pageSize=ref(10)//每页条数
const pageNum=ref(1)
const total=ref(0)

const projectList=ref<any>([])
const getProjectListAsync=async ()=>{
  const res=await getReportProjectList(reviewerId,pageNum.value,pageSize.value)
  if(res.items.length==0){
    
    return
  }else {
    for (let i = 0; i < res.items.length; i++) {
      res.items[i].projectStatus=statusConverter(res.items[i].projectStatus)
    }
    projectList.value=res.items
    total.value=res.items.length

  }

}
getProjectListAsync()


// 处理每页显示条数改变
const handleSizeChange = (newSize:any) => {
  pageSize.value = newSize;
  fetchData(currentPage.value, newSize).then(({ data, total }) => {
    projectList.value = data;
    total.value = total;
  });
};
// 处理当前页码改变
const handleCurrentChange = (newPage:any) => {
  currentPage.value = newPage;
  fetchData(newPage, pageSize.value).then(({ data }) => {
    projectList.value = data;
  });
};

// 状态标签类型

const getStatusTag = (status: string) => {
  if (status === '未评审') return 'info';
  if (status === '评审中') return 'primary';
  if (status === '已通过') return 'success';
  if (status === '未通过') return 'danger';
  return 'default';
};


// 查询条件
const name = ref('')
const status = ref('')
const dateRange = ref('')
const startDate=ref('')


const endDate=ref('')


const evaluator = ref('')
//查询


const searchProjects = async () => {

  startDate.value=dateRange.value[0]?.toISOString().split('T')[0] || '';
  endDate.value= dateRange.value[dateRange.value.length - 1]?.toISOString().split('T')[0] || '';

  let params={
    reviewerId:reviewerId,
    pageNum:pageNum.value,
    pageSize:pageSize.value,
    name:name.value?name.value:null,
    status:status.value?status.value:null,
    startDate:startDate.value.toString()?startDate.value.toString():null,
    endDate:endDate.value.toString()?endDate.value.toString():null,
    evaluator:evaluator.value?evaluator.value:null,
  }
  console.log(params)

  const res=await getReportProjectByCondition(params)
  console.log('评审查询')
  console.log(res)
  if(res.items.length==0){
    ElMessage.warning("结果为空")
    return
  }
  for (let i = 0; i < res.items.length; i++) {
    res.items[i].projectStatus=statusConverter(res.items[i].projectStatus)
  }

  projectList.value=res.items
}
//重置查询条件
const resetFilters = () => {
  name.value = ''
  status.value = ''
  dateRange.value = ''
  evaluator.value = ''
}

//状态转换
const statusConverter=(status: string)=>{
  if(status=='0'){
    return '未评审'
  }
  if (status=='1'){
    return '评审中'
  }
  if (status=='2'){
    return '已通过'
  }
  if (status=='3'){
    return '未通过'
  }
}
const converterStatus=(status:string)=>{
  if(status=='未评审'){
    return '0'
  }
  if(status=='评审中'){
    return '1'
  }
  if(status=='已通过'){
    return '2'
  }
  if(status=='未通过'){
    return '3'
  }
}
let cur_project_id=''
//步骤一 : 评审项目详情
const projectDetails=ref<any>()
const startReview=async (reviewId:any,projectId:any)=>{
  cur_review_id.value=reviewId
  cur_project_id=projectId

  projectDetails.value=await getProjectDetails(projectId)
  projectDetails.value.project.projectStatus=statusConverter(projectDetails.value.project.projectStatus)
  next()
}
//步骤二 : 项目基本信息审核
var first_detail=''
const baseInfo='information_review'
const aboutName=ref('')
const aboutTenant=ref('')
const aboutPdf=ref('')
const aboutTime=ref('')
const aboutStatus=ref('')

const secondProjectDetail=async ()=>{
  if(aboutName.value==''||aboutTenant.value==''||aboutPdf.value==''||aboutTime.value==''||aboutStatus.value==''){
    ElMessage.error("未评审完成")
    return
  }
  let res:string=getProjectDetailsResult()
  first_detail=res

  await saveProjectDetailReview(cur_review_id.value.toString(),baseInfo,res.toString())

  await getFpDetailsAsync(cur_project_id)
  next()

}
const getProjectDetailsResult=()=>{
  let cnt=0
  let res:string=''
  if(aboutName.value=='不合格'){
    cnt++
    res=res.concat('项目名称 :').concat(projectDetails.value.project.projectName)
        .concat('---->').concat(aboutName.value).concat(' .\n')
  }
  if(aboutTenant.value=='不合格'){
    cnt++
    res=res.concat('所属租户 :')
        .concat(projectDetails.value.username)
        .concat('---->')
        .concat(aboutTenant.value)
        .concat(' .\n')
  }
  if(aboutPdf.value=='不合格'){
    cnt++
    res=res.concat('项目需求 :')
        .concat('需求文档pdf')
        .concat('---->')
        .concat(aboutPdf.value)
        .concat(' .\n')
  }
  if(aboutTime.value=='不合格'){
    cnt++
    res=res.concat('开始时间、截止时间 :')
        .concat(getTimeValue(projectDetails.value.project.startTime))
        .concat('  至  ')
        .concat(getTimeValue(projectDetails.value.project.endTime))
        .concat('---->')
        .concat(aboutTime.value).concat(' .\n')
  }
  if(aboutStatus.value=='不合格'){
    cnt++
    res=res.concat('项目状态 :')
        .concat(projectDetails.value.project.projectStatus)
        .concat('---->')
        .concat(aboutStatus.value).concat(' .\n')
  }
  if(cnt==0){
    res='通过'
  }
  return res.toString()
}
const getTimeValue=(time:string)=>{
  if(time==undefined){
    return '未完成'
  }
  time=time.replace('T',' ')
  return time
}
//步骤三 : 功能点评估
const fpUrl=ref('')
const getFpDetailsAsync=async ()=>{


  const res=await getFpDerails(cur_project_id)
  fpUrl.value=res.url

}

//const vir_url='http://152.136.42.110:9115/swpt/1732168312607_./file_dir/%E7%BB%BC%E5%90%88%E9%80%A0%E4%BB%B7%E8%AF%84%E4%BC%B0%E6%8A%A5%E5%91%8A_GSC.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=UpqNh8wlUi48ZZAs4ARB%2F20241121%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241121T055152Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=81c6e7e12d04ed817b62950829c6f3c6d4925222848a1a1212433aa5f4cfdfac'

const fp_review='function_review'
const isFpPass=ref('')
const thirdFunctionPointEva=async ()=>{
  if(isFpPass.value==''){
    ElMessage.error("评审未完成")
    return
  }
  await saveProjectDetailReview(cur_review_id.value.toString(),fp_review,isFpPass.value)
  await getCostDerailsAsync(cur_project_id)
  next()
}
const costUrl=ref('')
const  getCostDerailsAsync=async (id:any)=>{
  const res=await getFpDerails(cur_project_id)
  costUrl.value=res.url
}
//步骤四 :综合造价评估
const cost_review='cost_review'
const isCostPass=ref('')
const fourCostReview=async ()=>{
  if(isCostPass.value==''){
    ElMessage.error("评审未完成")
    return
  }
  await saveProjectDetailReview(cur_review_id.value.toString(),cost_review,isCostPass.value)
  next()
}
//步骤五 : 审核意见
const comment_review='comment'
const comment=ref('')
const getStatusType=(status:string)=>{
  if(status=='通过'){
    return 'success'
  }
  return 'warning'
}
const commitCommentAsync=async ()=>{
  await saveProjectDetailReview(cur_review_id.value,comment_review,comment.value)
  next()
}
//word预览
import '@vue-office/docx/lib/index.css'
import VueOfficeDocx from '@vue-office/docx'

const props = defineProps({
  excel: {
    type: ArrayBuffer,
    default: null
  }
})

//步骤六 : 提交完成界面


</script>

<style scoped>
.step-content {
  margin-top: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}
.title{
  color: #1a1a1a;
  font-weight: bold;
}
.step1-header{
  border-radius: 8px;
  background-color: #FFFFFF;
  height: 100px;
}
.step1-header-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0;
}

.filter-form {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 0;
}
.main-content{
  border-radius: 8px;
  background-color: #FFFFFF;
}

.el-form-item > div {
  margin-bottom: 8px; /* 每行之间的间距 */
}

.el-radio-group {

  align-items: center;
  gap: 12px; /* 单选按钮之间的间距 */
}

.step3-content {
  position: relative;
  width: 90%;
  height: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
}
.step4-content{
  position: relative;
  width: 90%;
  height: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
}
.pdf-reader-container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.pdf-viewer {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.radio-group {
  position: absolute;
  bottom: 16px; /* 调节 margin-bottom */
  right: 16px; /* 调节 right 值 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.radio-group .el-radio-group {
  display: flex;
  gap: 12px; /* 调节单选按钮间距 */
}
</style>
